<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import SonCom from '@/components/sonCom.vue'

const box = ref()
console.log(box)
console.log(box.value)
onMounted(() => {
  console.log(box.value)
})
const son = ref()

function getEle() {
  console.log(box.value, 'getEle')
  console.log(son.value)
  console.log(son.value.msg)
  son.value.getMsg()
}


// 使用 provide 与 inject 用于父子组件间传递数据
// -----------------------在父组件中使用:
// provide 是一个在父组件中调用的方法，用于向其所有子组件提供数据
// 它接收两个参数 第一个参数是传递数据的唯一值也就是Key 第二个参数是 我们要传递的数据。
// 通过 provide 提供的数据将会被注入到子组件中，子组件通过 inject 来接收这些数据。
// ----------------------------在子组件中使用:
// inject 是一个在子组件中调用的方法，用于从父组件中接收通过 provide 提供的数据
// 它接收一个数组或对象作为参数，用来指定希望注入的数据属性。
// 如果以数组形式提供,那么 inject 将会搜索对应 provided 的键,如果找到,就将对应的值赋给子组件的相应属性;
// 如果指定一个默认值，如果不在 provide 中找到对应的键，则使用默认值。
// 如果以对象形式提供，inject 会将提供的键和子组件的属性进行映射。这允许子组件在使用时使用不同的属性名

// 当前的组件就是父组件 将info对象传递给子组件
// const info = reactive({
//   msg: '操作成功',
//   data: {
//     code: 0,
//     massage: '传递过来了'
//   }
// })
// const num = 10

const toGrand = ref('父组件的内容')
// 外部获取不到
provide('toGrandKey', toGrand)
// provide('infoKey', num)

</script>

<template>
  <h1>这是爷爷组件</h1>
  <div ref="box">这是要被获取的元素</div>
  <son-com ref="son"></son-com>
  <button @click="getEle">getEle</button>
</template>

<style scoped></style>
